<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueStudyDemo</title>
</head>
<body>
<div id="app">
    <div><a href="index.html">返回首页</a></div><hr>
    <h1>Hello App</h1>
    <button @click = "goBack">Go Back</button>
    <ul>
        <!--路由链接标签-->
        <li>
            <router-link to="/foo?msg=123">Go to foo</router-link>
        </li>
        <li>
            <router-link to="/bar">Go to Bar</router-link>
        </li>
    </ul>
    <div>
        <Foo msg = 'test props'></Foo>
    </div>
    <!--路由视图窗器-->
    <router-view></router-view>
</div>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const Foo = {
        props: ['msg'],
        template: `<div>foo components: {{ msg }}</div>`
    }
    const Bar = { template: `<div>bar</div>` }

    const routes = [
        // 在路由对象中：当props为Boolean mode时，动态路由参数（比如/user/:id）将转化为组件的属性
        // { path: '/foo', component: Foo, props: true },

        // 在路由对象中：当props为Object mode时，可以直接将一个对象转化为组件的属性
        //{ path: '/foo', component: Foo, props: {msg:'object style props'} },

        // 在路由对象中：当props为Function mode时，可以直接将静态对象与route对象合并，生成新的属性对象
        // route.query.q返回URL中的查询参数 如?msg=123
        { path: '/foo', component: Foo, props: route => ({ msg: route.query.msg }) },

        // 注意，不要在路由组件中的属性包含状态，应该使它只在路由更新时进行计算。如果要包含状态，请在其子组件中包含

        { path: '/bar', component: Bar },
    ]

    const router = new VueRouter({
        routes
    })

    // const app = new Vue({
    //     router
    // }).$mount('#app')
    const app = new Vue({
        el: '#app',
        components: { Foo },
        router,
        methods: {
            goBack() {
                window.history.length > 1
                ? this.$router.go(-1)
                : this.$router.push('/')
            }
        }
    })
</script>
</body>
</html>